import React, { Component } from 'react';
import { Chart, LineAdvance } from 'bizcharts';

interface twoDimensionalData {
    row: number
    column: number
}
interface twoDimensinalBody {
    rowName: string  //横坐标
    columnName: string   //纵座标
    data: twoDimensionalData[]
}

interface IProps {
    title: string
    dataBody: twoDimensinalBody
}
export default class index extends Component<IProps> {
    render() {
        if (this.props.dataBody == null)
            return;
        return (
            <div style={{ width: '100%', minHeight: '300px' }}>
                <div className="titleBox" style={{ width: '100%', marginTop: '48px' }}>
                    <h1 style={{ fontWeight: 'bolder', fontSize: '20px' }}>{this.props.title}</h1>
                    横坐标：{this.props.dataBody.rowName}
                    <br />
                    纵坐标：{this.props.dataBody.columnName}
                </div>
                <Chart padding={[10, 20, 50, 40]} autoFit height={350} data={this.props.dataBody.data} >
                    <LineAdvance
                        shape="smooth"
                        point
                        position="row*column"
                    />
                </Chart>
            </div>
        )
    }
}
